<template>
  <!-- 弹框 -->
  <div class="popup" v-show="switchPopUp">
    <div class="popup-info">
      <div class="bullet-frame">
        <div class="login-header">
          <span>登录</span><i class="el-icon-close" @click="cancel"></i>
        </div>
        <div class="qr-code-login" v-show="otherLogin">
          <div class="scan-and-login">
            <img src="./login1.png" alt="加载错误" />
            <div class="scan">
              <span>扫码登录</span>
              <div><img src="../../assets/images/touxiang.jpg" alt="" /></div>
              <span
                >使用 <a href="javascript:;"> 网易云音乐APP </a> 扫码登录</span
              >
            </div>
          </div>
          <el-button
            round
            class="other-login"
            size="small"
            @click="handleOtherLogin"
            >选择其他登录模式</el-button
          >
        </div>
        <div v-show="!otherLogin" class="qr-code-login">
          <div class="enter-mobile-phone">
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="auto"
              class="demo-ruleForm"
            >
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="pass">
                <el-input
                  type="password"
                  v-model="ruleForm.pass"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >提交</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="registered-account">
            <a @click="handleSwitch">< 其他登录方式</a>
            <span>没有账号?免费注册 ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from 'vuex'
export default {
  name: 'PopUp',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('手机号不能为空'))
      } else if (!/^1\d{10}$/.test(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    return {
      otherLogin: true,
      ruleForm: {
        pass: '',
        phone: ''
      },
      rules: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        phone: [{ validator: validatePhone, trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapState({
      switchPopUp: (state) => state.header.switchPopUp
    })
  },
  methods: {
    ...mapActions('user', ['login']),
    ...mapMutations('header', ['SWITCH_POPUP']),
    ...mapMutations('songandfriends', ['SWIATCH_SONG_FRIEND']),
    // 点击弹窗取消
    cancel() {
      this.SWITCH_POPUP(false)
      document.documentElement.style.overflow = 'scroll'
    },
    // 其他登录方式
    handleOtherLogin() {
      this.otherLogin = false
    },
    //表单校验
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { pass, phone } = this.ruleForm
          try {
            const { user,nickname, avatarurl, token,userid } = await this.login({
              phone,
              password: pass
            })
            console.log(nickname, avatarurl, token)
            if (user.code === 200) {
              this.$message({
                message: '登录成功',
                type: 'success'
              })
              window.localStorage.setItem('user_nickname', nickname)
              window.localStorage.setItem('user_avatarurl', avatarurl)
              window.localStorage.setItem('user_token', token)
              window.localStorage.setItem('userid', userid)
              // 登录成功后需要重新发送请求请求当前页面信息
              this.SWIATCH_SONG_FRIEND(false)
              this.SWITCH_POPUP(false)
              document.documentElement.style.overflow = 'scroll'
              // this.$router.history.push('/')
              return
            }
          } catch (e) {
            alert(e)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //切换二维码
    handleSwitch() {
      this.otherLogin = true
    }
  }
}
</script>

<style  scoped>
/* 弹框 */
.popup {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 9998;
}
.popup-info {
  position: fixed;
  width: 950upx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30upx;
  padding: 40upx;
  border-radius: 20upx;
  z-index: 9999;
}
.flex {
  display: flex;
  list-style: none;
  /* 设定li元素横向排列 */
}

.loading {
  width: 200px;
  height: 200px;
}

.loading > li {
  --time: calc((var(--line-index) - 1) * 200ms);
  border-radius: 3px;
  width: 6px;
  height: 30px;
  background-color: #f66;
  /* 动画都是一个动画,但是开始的时间不同,就显示出这样的效果了 */
  animation: beat 1.5s ease-in-out var(--time) infinite;
}

.loading > li + li {
  margin-left: 5px;
}

@keyframes beat {
  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(0.5);
  }
}
.bullet-frame {
  width: 530px;
  height: 372px;
  /* border: 1px solid red;
   */
}
.login-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  background-color: #2d2d2d;
  font-weight: 800;
  color: #fff;
  font-size: 20px;
}
.login-header span {
  margin-left: 18px;
}
.login-header i {
  margin-right: 20px;
  padding: 5px;
  cursor: pointer;
  color: rgb(206, 200, 200);
}
.qr-code-login {
  height: calc(100% - 38px);
  width: 100%;
  background-color: #ffffff;
  text-align: center;
}
.scan-and-login {
  display: flex;
  justify-content: center;
  padding-top: 30px;
}
.scan-and-login img {
  width: 130px;
  margin-right: 30px;
}
.scan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.scan span:first-child {
  font-size: 20px;
}
.scan div {
  width: 138px;
  height: 138px;
  /* border: 1px solid red; */
  margin: 10px 0;
}
.scan span:last-child a {
  color: #0c73c2;
}
.scan span:last-child a:hover {
  color: #0c73c2 !important;
}
.other-login {
  margin-top: 20px;
  color: #000;
}
.other-login:hover {
  color: #000;
  background-color: #fff;
}
/* 切换登录弹框 */
.qr-code-login {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.registered-account {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.registered-account a {
  padding-left: 10px;
  color: #0c72c3;
  cursor: default;
}
.registered-account span {
  padding-right: 10px;
  color: #999;
}
</style>
